.box {
  box-sizing: border-box;
  color: rgb(2, 39, 44);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.sub-layout {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  justify-items: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 20px;
  background-color: white;
  row-gap: 20px;
}
.select-group {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  justify-items: flex-start;
  align-items: center;
  column-gap: 20px;
}
.select-layout {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  column-gap: 4px;
}
.picture-layout {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  justify-items: flex-start;
  align-items: flex-start;
  row-gap: 10px;
}
.curr-map {
  grid-area: cm;
  @extend .select-layout;
}
.curr-npc {
  grid-area: cn;
  @extend .select-layout;
}
.curr-map-picture {
  grid-area: cmp;
  @extend .picture-layout;
}
.dest-npc {
  grid-area: dn;
  @extend .select-layout;
}
.dest-map {
  grid-area: dm;
  @extend .select-layout;
}
.dest-map-picture {
  grid-area: dmp;
  @extend .picture-layout;
}
.result {
  color: red;
}
.label {
  font-weight: 700;
  height: 20px;
  line-height: 20px;
}

.map-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
